<ui:composition xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.prime.com.tr/ui"
	template="../templates/plantilla.xhtml">
	
	<ui:define name="head">::SCSN - Empleados</ui:define>
	<ui:define name="content">
	
		<h1 class="title ui-widget-header ui-corner-all">Gestión de Empleados</h1>
		<br/>
		<br/>
		
		<div class="entry" style="line-height:200%">
		
			<p:growl id="mensajes" showDetail="true" life="2000" />
			
			<!-- ventanas para modificar y registrar -->
			
			
			<h:form id="formulario">
				<script type="text/javascript">
					function limpiarForm() {
						document.getElementById("formulario").reset();
					}
				</script>
	       	
			       <h:panelGrid id="data" columns="3">
				   		<h:outputLabel value="Cédula: *" for="cedula"/>
				   		<h:inputText id="cedula" value="#{serviciosVentanaEmpleado.empleado.cedulaEmpleado}" label="Cedula:" required="true"/>
				   		<p:message for="cedula"/>
				   		
				   		<h:outputLabel value="Nombre: *" for="nombre"/>
				   		<h:inputText id="nombre" value="#{serviciosVentanaEmpleado.empleado.nombre}" label="Nombre:" required="true"/>
				   		<p:message for="nombre"/>
				   		
				   		<h:outputLabel value="Apellido: *" for="apellido"/>
				   		<h:inputText id="apellido" value="#{serviciosVentanaEmpleado.empleado.apellido}" label="Apellido:" required="true"/>
				   		<p:message for="apellido"/>
				   		
				   		<h:outputLabel value="Direccion: *" for="direccion"/>
				   		<h:inputTextarea id="direccion" value="#{serviciosVentanaEmpleado.empleado.direccion}" label="Direccion:" required="true"/>
				   		<p:message for="direccion"/>
				   		
				   		<h:outputLabel value="Teléfono:" for="telefono"/>
				   		<p:inputMask  id="telefono" value="#{serviciosVentanaEmpleado.empleado.telefono}" mask="(999) 999-9999"></p:inputMask>
				   		<p:message for="telefono"/>
				   		
				   		<h:outputLabel value="Celular: *" for="celular"/>
				   		<p:inputMask  id="celular" value="#{serviciosVentanaEmpleado.empleado.celular}" mask="(999) 999-9999" required="true"></p:inputMask>
				   		<p:message for="celular"/>
				   		
				   		<h:outputLabel value="Email:" for="email"/>
				   		<h:inputText id="email" value="#{serviciosVentanaEmpleado.empleado.correo}" label="Email:"/>
				   		<p:message for="email"/>
				   		
				   		<h:outputLabel value="Empresa: *" for="empresa"/>
							<h:inputText id="empresa" label="Empresa:"/>
							<p:message for="empresa"/>
							
							<h:outputLabel value="Cargo: *" for="cargo"/>
				     		<h:selectOneMenu id="cargo" label="Cargo: ">
				     			<f:selectItem itemLabel="-Seleccione-" itemValue=""/>
				     			<f:selectItems value="#{serviciosVentanaEmpleado.listaCargos}" var="cargo" itemLabel="#{cargo.nombre}" itemValue="#{cargo}"/>
				     		</h:selectOneMenu>
				       	<p:commandButton value="Nuevo Cargo" onclick="ventanaNuevoCargo.show();"/>
				       	
				   		<p:message for="cargo"/>
				   		<h:panelGrid columns="3">
				       		<p:commandButton value="Registrar" action="#{serviciosVentanaEmpleado.guardarEmpleado}"
				       							oncomplete="limpiarForm()"  update=":tbEmpleado :mensajes"/>
							<p:commandButton value="Cancelar" action="empleados"/>
				   			<p:commandButton value="Limpiar" type="reset"/>
				   		</h:panelGrid>
				       </h:panelGrid>
			</h:form>
			<!-- VENTANAS PARA EL REGISTRO EMERGENTE DE CARGOS -->
			<h:form>
				<p:dialog widgetVar="ventanaNuevoCargo" header="Registrar Nuevo Cargo" modal="true"
	         			showEffect="explode" hideEffect="explode" closable="false">
	         	<h:panelGrid columns="3">
	         		<h:outputLabel value="Nombre: *" for="nombreCargo"/>
	         		<h:inputText id="nombreCargo" value="#{cargo.nombre}" required="true" label="Nombre:"/>
	         		<p:message for="nombreCargo"/>
	         		
	         		<h:outputLabel value="Descripción: " for="descripcionCargo"/>
	         		<h:inputTextarea id="descripcionCargo" value="#{cargo.descripcion}" label="Descripción: "/>
	         		<p:message for="descripcionCargo"/>
	         		 
	         		<p:commandButton value="Registrar" type="reset" onclick="ventanaNuevoCargo.hide();"/>
	         		<p:commandButton value="Cancelar" type="reset" onclick="ventanaNuevoCargo.hide();"/>
	         		<p:commandButton value="Limpiar" type="reset"/>
	         	</h:panelGrid>
	         </p:dialog>
			</h:form>
		</div>
		
	</ui:define>
</ui:composition>